import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svg/svg.dart';
import 'package:shenling/pages/my/components/options.dart';
import 'package:shenling/utils/http.dart';

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  Map userInfo = {};
  // 调接口获取个人信息
  Future<void> getUserInfo() async {
    var res = await dioHttp.get('/driver/users');
    // print(res);
    setState(() {
      userInfo = res['data'];
    });
  }

  @override
  void initState() {
    super.initState();
    getUserInfo();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(alignment: Alignment.topCenter, children: [
        Image.asset(
          'images/bg_page_my.jpg',
          width: MediaQuery.of(context).size.width,
          fit: BoxFit.cover,
        ),
        Column(children: [
          const SizedBox(height: 80),
          // 头像
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(50),
            ),
            child: userInfo['avatar'] != null &&
                    userInfo['avatar'].toString().isNotEmpty
                ? Image.network(
                    '${userInfo['avatar']}',
                    width: 80,
                    height: 80,
                    fit: BoxFit.cover,
                  )
                : SvgPicture.asset(
                    'images/ic_avatar_driver.svg',
                    width: 80,
                    height: 80,
                    fit: BoxFit.fill,
                  ),
          ),
          const SizedBox(height: 15),
          // 名字
          Text(userInfo['name'] ?? '王大锤',
              style: const TextStyle(color: Colors.white, fontSize: 18)),
          const SizedBox(height: 10),
          // 司机编号
          Text('司机编号: ${userInfo['number']}',
              style: TextStyle(color: Colors.white, fontSize: 14)),
          const SizedBox(height: 10),
          // 手机号
          Text('手机号：${userInfo['phone']}',
              style: TextStyle(color: Colors.white, fontSize: 14)),
          // 本月任务
          Padding(
            padding: const EdgeInsets.only(top: 15, left: 20, right: 20),
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: 150,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: const Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
              child: const Column(
                children: [
                  SizedBox(height: 10),
                  Text(
                    '-本月任务-',
                    style: TextStyle(color: Colors.grey),
                  ),
                  SizedBox(height: 15),
                  Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Column(
                          children: [
                            Text(
                              '18',
                              style: TextStyle(fontSize: 16),
                            ),
                            SizedBox(height: 10),
                            Text(
                              '任务总量',
                              style: TextStyle(fontSize: 12),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            Text(
                              '16',
                              style: TextStyle(fontSize: 16),
                            ),
                            SizedBox(height: 5),
                            Text(
                              '完成任务量',
                              style: TextStyle(fontSize: 12),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            Text(
                              '120',
                              style: TextStyle(fontSize: 16),
                            ),
                            SizedBox(height: 5),
                            Text(
                              '运输里程（km）',
                              style: TextStyle(fontSize: 12),
                            )
                          ],
                        ),
                      ])
                ],
              ),
            ),
          ),

          const SizedBox(height: 8),

          // 选项
          Padding(
            padding: const EdgeInsets.only(top: 15, left: 20, right: 20),
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: 180,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: const Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
              child: ListView(
                children: [
                  // -------------- 车辆信息 -----------------
                  const SizedBox(height: 15),
                  OptionsView(title: '车辆信息'),
                  const SizedBox(height: 15),
                  // 分割线
                  const Divider(
                    height: 1,
                    color: Color.fromARGB(255, 236, 234, 234),
                    indent: 20,
                    endIndent: 20,
                    // 宽度
                  ),
                  // -------------- 任务数据 -----------------
                  const SizedBox(height: 15),
                  GestureDetector(
                    onTap: () {
                      // print('任务数据');
                      Navigator.pushNamed(context, '/login');
                    },
                    child: OptionsView(title: '任务数据'),
                  ),
                  const SizedBox(height: 15),
                  // 分割线
                  const Divider(
                    height: 1,
                    color: Color.fromARGB(255, 236, 234, 234),
                    indent: 20,
                    endIndent: 20,
                    // 宽度
                  ),
                  // ----------------- 系统设置 ---------------
                  const SizedBox(height: 15),
                  GestureDetector(
                    onTap: () {
                      // print('系统设置');
                      Navigator.pushNamed(context, '/setting');
                    },
                    child: OptionsView(title: '系统设置'),
                  ),

                  const SizedBox(height: 15),
                ],
              ),
            ),
          ),
        ])
      ]),
    );
  }
}
